<template>
  <div class="bigBox">
    <div class="topFlexStyle">
      <!-- 轮播 -->
      <el-carousel
        trigger="click"
        :interval="time"
        class="carousel"
        height="450px"
      >
        <el-carousel-item v-for="(value, i) in data.slice(0, 4)" :key="i">
          <img
            class="carouselImg"
            :src="require(`../../assets/imgs/cl/${value.img}`)"
            alt
          />
          <h3
            @click="
              () => {
                jumpDetail(value.aid);
              }
            "
          >
            {{ value.title }}
          </h3>
        </el-carousel-item>
      </el-carousel>
      <!-- 选项切换 -->
      <MyTab class="myTab"></MyTab>
    </div>
    <div class="flexStyle">
      <!-- 视频区 -->
      <div class="videoStyle">
        <MyVideo
          :title="value"
          v-for="(value, i) in data.slice(0, 4)"
          :key="i"
        ></MyVideo>
      </div>
      <!-- 卡片区 -->
      <div class="myCard">
        <MyCard
          :title="value"
          v-for="(value, i) in data.slice(0, 4)"
          :key="i"
        />
      </div>
    </div>
  </div>
</template>
<script>
import MyTab from "../../components/cl/NewsTab";
import MyVideo from "../../components/cl/NewsVideo";
import MyCard from "../../components/cl/NewsCard";
import { getNews } from "../../api/cl/getNews.tsx";
export default {
  name: "Element",
  data() {
    return {
      source: [
        {
          key: 1,
          img: "img1.jpg",
          video:
            "http://ugcyd.qq.com/uwMROfz2r57EIaQXGdGnC2ddDmY0gCKxs_YQn4ev8GMVk_hh/shg_62126804_50001_aa7932400c603e13ac132dc61d3d5100.f622.mp4?sdtfrom=v1105&guid=4065b8e1dc284d58b37f2e802e91f51b&vkey=3A77454B3D223B1A2C5384CB1FD7402D0AACF505AD2C47F31F3ACA195C0E43193299EF4FBF063CDDD26371F98A06EC2543DC9F221E8A9C3F94B83028AA36F2117DEC6BCDECB8F139D7234AD30064C1508EDAD8FFE7BFBE838823603DAE4BDEF5FB8EA385752C1E787C459B55C1841626A5DAA1330FEF4F2CB3AF97F056605ED2",
        },
        {
          key: 2,
          img: "img2.jpg",
          video:
            "http://ugcyd.qq.com/uwMROfz2r57EIaQXGdGnC2deB3d8zuLRhDFyeUweKwuaKjKr/szg_26015449_50001_7616204ee6084cb9bf53a2b7a2a0ff33.f622.mp4?sdtfrom=v1105&guid=4065b8e1dc284d58b37f2e802e91f51b&vkey=202F4FDF5EA27501665DC66759DD04D1B6D9860AB8C3F9BF0535202B69D6BD711A04F14FFD180C620859443A9A67E7056762A88FB3164E0F32073A0211B791FD03859AC7FA8B6F76F1FB739A139AF6E0BEFAC8E4BFCA3840AF1CFD84D35BB20231F6DAA2F35C6EDD18FE3050F57389B43AE65DCDD6FBE3C51B70D437244F03C5",
        },
        {
          key: 3,
          img: "img3.jpg",
          video:
            "http://ugcyd.qq.com/uwMROfz2r57AoaQXGdGnC2ddDmYQ8UptP9A3iu5jQZBMeQ8w/shg_01883632_50001_71571fdc9008350ea0c3796115023b08.f622.mp4?sdtfrom=v1105&guid=4065b8e1dc284d58b37f2e802e91f51b&vkey=940257E7AC8E4D7BB443BCA152EE7AA1648A911F3E9E054E872D1C20A3B370BE0171A8ECA05DE07D2D9E36F4BB67968476933BA9FC4E49C459D14AF02CD2123E8698CDAE149714C0ADCE72C8CADA591A6C3D00093EA2F3B0D7EBA6EFE35FB40563F97D0CF60F23804FFDFF7775449FC4BC6E5E2266BE3715EB395EA7FB25E0A1",
        },
        {
          key: 4,
          img: "img4.jpg",
          video:
            "http://ugcyd.qq.com/uwMROfz2r57EIaQXGdGnC2deB3d8zuLRhDFyeUweKwuaKjKr/szg_47185916_50001_ef53b51d246b46f499d90666297106d5.f622.mp4?sdtfrom=v1105&guid=4065b8e1dc284d58b37f2e802e91f51b&vkey=F0CA5DA035CA159503044BDE9540961A0A156FAECA055B1F0AC814D190EEE80868CF6662517371548D91441E4344B491572E80D2E862D74E5E38CAC5E84EA94DC86ACE5A03A136F4604C4AB871F486AD3B550A771C7B1F6229F730CD689B24C532429D7EC68935AA4E5CD6E5D318EDEE8880F7A46E267565E95087129A7F8877",
        },
      ],
      data: [],
      activeName: "first",
      time: 9000,
    };
  },
  methods: {
    jumpDetail(aid) {
      this.$router.push(`/pc/scienceAticle?article_id=${aid}`);
    },
  },
  mounted() {
    getNews().then((res) => {
      let i = 1;
      res.data.data.map((item) => {
        if (item.key == undefined) {
          item.key = i++;
        }
      });
      this.source.map((value) => {
        res.data.data.slice(0, 4).map((item) => {
          if (item.key == value.key) {
            item.img = value.img;

            item.video = value.video;
          }
        });
      });
      this.data = res.data.data.slice(0, 4);
    });
  },
  components: {
    MyTab,
    MyVideo,
    MyCard,
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}

/* ****** */
.carouselImg {
  width: 100%;
  height: 100%;
}
.flexStyle,
.topFlexStyle {
  display: flex;
  width: 90%;
  margin: auto;
  justify-content: space-between;
}
.topFlexStyle {
  margin-top: 75px;
}
.myCard {
  width: 42%;
  float: left;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.cardImage {
  width: 200px;
  cursor: pointer;
  display: block;
  margin: auto;
}
h3 {
  color: #fff;
  z-index: 5;
  position: absolute;
  height: 80px;
  bottom: 0px;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
  cursor: pointer;
}
.text {
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.title {
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}
.title:hover {
  color: cornflowerblue;
}
.videoStyle {
  margin-top: 10px;
  width: 50%;

  float: left;
}
.bigBox::before {
  content: "";
  display: table;
}
.bigBox {
  margin: auto;
  width: 100%;
  background-image: url("../../assets/imgs/cl/back.jpg");
}
.carousel {
  width: 68%;
  position: relative;
}

/* 重写轮播样式 */
.carousel /deep/ .el-carousel__button {
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.carousel /deep/ .el-carousel__indicators {
  position: absolute;
  display: flex;
  justify-content: space-around;
  width: 100px;
}
.carousel /deep/ .el-carousel__indicators--horizontal {
  bottom: 10px;
  left: 80%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.carousel /deep/ .el-carousel__arrow {
  width: 50px;
  height: 80px;
  border-radius: 0;
}
.carousel /deep/ .el-icon-arrow-left,
.carousel /deep/ .el-icon-arrow-right {
  font-size: 35px;
  font-weight: bold;
}
</style>
